<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品添加</title>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/Admin/bootstrap/css/bootstrap.min.css" media="screen">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/MyComponent/style/drag.css" >
    <script type="text/javascript" src="__PUBLIC__/js/jquery-2.1.4.min.js"></script>

    <script type="text/javascript" src="__PUBLIC__/Admin/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/MyComponent/js/uploadFun.js"></script>

    <style>

        input{

            width：174px;
        }


        select{

            width：174px;
        }

        body{
            height: 1000px;
            font-size: 14px;
        }
        

        .Idiv{
            
            height: 180px;
            width: 180px;
            border: 2px dotted #ccc;
            background-color: #fff;
            margin: 10px;
            line-height:180px;
        }


        div{

            text-align: center;
        }

    </style>

</head>
<body>
    
    <div class="container">
        <div class="row">
            <div class="col-md-10">
                        <div class="panel panel-primary">
                          <div class="panel-heading">添加商品</div>
                          <div class="panel-body">
                           
                          </div>
                            <form action="{:U('Admin/Goods/modify')}" method="post" id="form1" enctype="multipart/form-data">
                                <table class="table">
                            <tr>
                                <td></td>
                                <th>分类名称：</th>
                                <td>
                                    <select name="paid" class="small" size="" id="sel" style="width:160px;">
                                        <option>请选择</option>
                                        <foreach name="classes" item="vo">
                                            <optgroup label="{$key}" style="color:red;font-family:microsoft yahei">
                                                <foreach name="vo" item="v">
                                                    <option value='{$key}' style="color:#A29B9B">{$v}</option>
                                                </foreach>
                                            </optgroup>
                                        </foreach>
                                    </select>

                                </td><td></td>
                            </tr>


                            <tr>
                                <td></td>
                                <th>商品名称：</th>
                                <td><input type="text" name="prodectsname"></td>
                                <td></td>
                            </tr>
                            
                           
                             <tr>
                                <td></td>
                                <th>商品原价：</th>
                                <td><input type="text" name="price" ></td>
                                <td></td>
                            </tr>

                               <tr>
                                <td></td>
                                <th>商品折扣：</th>
                                <td> <select  class="small" name="discount" style="width:160px;">
                                <option value="10">请选择</option>
                                <option value="0">0</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">不打折</option>
                            </select></td>
                                <td></td>
                            </tr>

                         
                              <tr>
                                <td></td>
                                <th>商品现价：</th>
                                <td><input type="text" name="nowprice" disabled="true"></td>
                                <td></td>
                            </tr>

                                  <tr>
                                <td></td>
                                <th>商品库存：</th>
                                <td><input type="text" name="num" ></td>
                                <td></td>
                            </tr>

        
                            <script type="text/javascript">
                            //计算商品现价
                            $(function(){

                                    var price = '';
                                    var discount = '';
                                    var nowprice = '';
                                    $('input[name=price]').blur(function(){
                                        price = $(this).val();
                                        if(discount && price){
                                            
                                            $('input[name=nowprice]').val(nowprice = price*discount/10);
                                        }
                                    })
                                    $('select[name=discount]').change(function(){
                                        discount = $(this).val();
                                        if(discount && price){
                                            $('input[name=nowprice]').val(nowprice = price*discount/10);
                                        }
                                    })

                            })
            

                        
                            
                        </script>

                            <tr>
                            <td></td>
                              <td></td>
                          
                               <td>
                               <button type="buttton" class="btn btn-info" id="addAttr"  onsubmit="return false">添加属性</button>
                              <!--  <button class="btn btn-info" id="detail">商品详情</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -->
                               </td>
        
                                <td>一组属性中若有空值，直接忽略该组数据</td>
                            </tr>
                                
                            <!--   <tr><td></td><th>属性选择</th><td><select name="atrr_name" id=""><option value=""></option></select></td><td></td></tr><tr><td></td><th>属性赋值</th><td><select name="atrr_name" id=""><option value=""></option></select></td><td></td></tr> -->
                                
                     
                            </table>


                            <button type="submit" class="btn btn-primary">添加</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button class="btn btn-danger" id="btn1">重置</button>
                            
                            
       
                      
                            </form> 
                          </div>
            </div>
        </div>
    </div>
</body>
</html>
<script>

        $(function(){

             var typid  = 0;

             var url    = '/index.php/Admin/Goods/loadOption.html';

            $('#sel').change(function()//JQ获取sel值后隐藏域传值
                {

                 typid   = ($("select option:selected").val());

                
                });






            $('#addAttr').click(function(){


                if (typid!=0)
                {
                    $.ajax({
                       type: "POST",
                       url: url,
                       data: {'type_id':typid},
                       dataType:'json',
                       success: function(msg){

                        var span  = $(' <span class = "btn btn-danger attr_name">删除</span> ');
                        
                        var sel1 = $('<select name="attr_name" id="atrr_name" style="width:174px"></select> ');   

                        var tr = $('<tr></tr>');

                        var th = $('<th>属性选择:</th>');

                        var td = $('<td></td>');


                        var td1 = $('<td></td>');

                            $.each(msg,function(k,v){

                                var opt = $('<option></option>');

                                opt.html(v.attr_name).val(v.id);

                                // opt.html(v.attr_name).val(v.attr_name);

                                sel1.append(opt);     

                                })

                                td1.append(sel1);
                                td1.append(span);
                                tr.append(td);
                                tr.append(th);
                                tr.append(td1);       
                                $('.table').append(tr);
                              

                             sel1.change(function(){


                                    selChange($(tr),$(this).val());

                                    
                            });


                             $('.attr_name').click(function(){


                               var next1 = $(this).parent().parent().next();

                               var next2 = $(this).parent().parent().next().next();

                                $(this).parent().parent().remove();

                                next1.remove();

                                next2.remove();

                                $('.attr_val').parent().parent().remove();

                                $(this).parent().parent().remove();

                             })


                             $("table").delegate("span", "click", function(){
                                
                                    if ($(this).hasClass("add") )
                                    {

                                    var tr3 = $('<tr></tr>');
                                    var th3 = $('<th>属性主图:</th>');
                                    var td3 = $('<td></td>');
                                    var tdo = $('<td></td>');


                                   var that = $(this).parent().parent();
                                   var divImg  = $('<input type="file" name="logo">');                                   

                                    // console.log(that)
                                    tdo.append(divImg);
                                    tr3.append(td3);
                                    tr3.append(th3);
                                    tr3.append(tdo);

                                    that.after(tr3);



                                    $(this).removeClass('add');
                                    };


                                    if ($(this).hasClass('del')) 
                                        {
                                            $(this).parent().parent().remove();
                                        };

                            });
                        
                       }
                    });


                 
                         

                }else{

                    alert('请选择分类');
                }




                   function selChange(obj,attr_id){

                     var sel2 = $('<select name="attr_val" id="atrr_name" class = "attr_val" style="width:174px"></select> ');   
                        var span  = $(' <span class = "btn btn-info attr add" id="addImg">主图</span> ');

                         var span2  = $(' <span class = "btn btn-danger attr del">删除</span> ');

                        var tr = $('<tr id="tr2"></tr>');

                        var th = $('<th>属性值:</th>');

                        var td = $('<td></td>');

                        var td1 = $('<td></td>');


                       $.ajax({

                               type: "POST",
                               url: "/index.php/Admin/Goods/loadAttrVal.html",
                               data: {'attr_id':attr_id},
                               dataType:'json',
                               success: function(data){

                                var attr_val = data[0]['attr_val'];
                                 
                                $.each(attr_val,function(k,v){

                                var optv = $('<option></option>');

                                optv.html(v).val(v);

                                // console.log(v)

                                sel2.append(optv);

                               
                  

                                })

                                td1.append(sel2);
                                td1.append(span);
                                td1.append(span2);
                                tr.append(td);
                                tr.append(th);
                                tr.append(td1);
                                

                                obj.after(tr);

                          
                               }
                            
                            }); 

                    }
             
                    return false;
            })
        








})


        


        // Myupload("/index.php/Admin/Goods/insert.html");


</script>
